<script setup>
//获取父组件传过来的item
// const props = defineProps(['item'])
// //获取商品图片路径
// function getImageUrl(imageName) {
//   return new URL(`../../assets/img/TestImg/${imageName}`, import.meta.url).href
// }

const props = defineProps(['item'])
// OSS配置
// const OSS_BASE_URL = 'https://zdbackend.oss-cn-guangzhou.aliyuncs.com/20241102/product-img/'
// 获取商品图片路径
function getImageUrl(imageName) {
  if (!imageName) return ''
  return `${imageName}`
}

</script>

<template>
  <el-card class="card">
    <template #default>


  <div class="box">
    <div class="top"> <el-image style="width: 180px;height: 150px;border-radius: 5px" :src="props.item.img" ></el-image><br></div>
    <div class="center">
      <div class="up">
        <span class="title">{{props.item.title}}</span>
      </div>
      <div class="down">
        <el-tag class="tag" type="danger" v-for="tag in props.item.tags">
          <span style="font-size: 12px;color: #ff0036">{{tag}}</span>
        </el-tag>
      </div>
    </div>
    <div class="bottom" >
      <div class="left">
        <span style="font-size: 12px;color: #666">到手价</span>&nbsp;
        <span class="price">¥{{ props.item.g_price.toFixed(2) }}</span>
      </div>
      <span class="turnover">已售{{props.item.turnover}}</span>
    </div>
  </div>
    </template>
</el-card>

</template>

<style scoped lang="less">

.up {
  width: 100%;
  height: 30px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.down {
  width: 100%;
  height: 30px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 5px

}

.el-tag{
  height: 20px;
  background-color: #feeef4;
}

.left {
  float: left;
  width: 200px;
  height: 100%;

}
.right {
  float: right;
  height: 100%;
}

.bottom{
  display: flex;
  flex-direction: column;
}
.price{
  font-size: 18px;
  color: #ff442f;
}
.unit{
  line-height: 24px;
  font-size: 12px;
  color: #ff442f;
}
.card{
  display: flex;
  flex-direction:column;
  width: 228px;
  height: 305px;

  padding-top: 0;
}

.card:hover {
  border: #1fe343 2px solid;
  cursor: pointer; //光标变成手
}

.turnover{
  font-size: 12px;
  color: #9b9b9b;
  //letter-spacing: 0;
  line-height: 28px;
  margin-left: auto;
}

.title{
  font-size: 14px;
  color: #333;

}
</style>